<template>
  <div id="app">
   
    <router-view/>
    <div class="bottomBar" id="bottomBar">
      <div class="bottom">
        <!-- <img src="./assets/logo.png" /> -->
        <div class="active bot home" @click="goHome">
          <img src="./assets/images/bottombar/home.png" alt="">
        </div>
        <div class="bot bbs"  @click="goForum">
          <img src="./assets/images/bottombar/bbs.png" alt="">
        </div>
        <div class="bot cart" @click="goCart">
          <img src="./assets/images/bottombar/cart.png" alt="">
        </div>
        <div class="bot my" @click="goMy">
          <img src="./assets/images/bottombar/my.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    goHome(){
      this.$router.push({name:"home"})
    },
    goForum(){
      this.$router.push({name:"forum"})
    },
    goCart(){
      this.$router.push({name:"cart"})
    },
    goMy(){
      this.$router.push({name:"my"})
    }
  }
}
</script>


<style lang="less">
html{
  /* 设计稿750px 1rem=100px */
  font-size: calc(100vw/7.5);
}
body{
  margin: 0;
  background-color: #FFFFFF;
  font-size: 0.14rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  color: #666666;
}
#app,body,html{
  height: 100%;
}
a{
  text-decoration: none;
  color: #333;
}
img{
  border: 0;
  vertical-align: top;
}
ul{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
.left{
  float: left;
}
.right{
  float: right;
}
.clearfix::after{
  display: block;
  content: "";
  clear:both;
  height: 0;
  visibility: hidden;
}
.flex{
  display: flex;
}
.flex-item{
  flex: 1;
}

/* 底部布局 */
#app #bottomBar{
  display: flex;
  z-index:2;
  width: 100%;
  height: 1rem;
  background:linear-gradient(to top,#E60106 0%,#EF191C 100%);
  position: fixed;
  bottom: 0;
  .bottom{
    display: flex;
    width: 100%;
    height: 1rem;
    // line-height: 1rem;
    -webkit-align-items: center;
    margin: 0rem 0.5rem;
    text-align: center;

    .bot{
      flex: 1;
      height: 100%; //必须要的把盒子撑开,因为这个盒子里没有内容，必须这样写，否则就是空的盒子没有尺寸但位置还是占有着的;当使用方法一不用加,方法二必须加
      width: 100%;  //必须要的把盒子撑开,因为这个盒子里没有内容，必须这样写，否则就是空的盒子没有尺寸但位置还是占有着的;当使用方法一不用加,方法二必须加
      text-align: center;//使用方法一必须加这行代码,让图片水平居中
      // line-height:1rem;//没效果
      margin-top: 0.41rem;

    }
    // 方法一
    img{
      width: 0.58rem;
      height: 0.58rem;
      // text-align: center;
    }
  }
  


  // 方法二：不用在div里面放入img标签图片,很省事的;比方法一要好
  .bottom .home{
    // background: url("assets/images/bottombar/home.png") no-repeat center;
    // background-image: url("assets/images/bottombar/home.png") no-repeat center;
    // background-size: 0.58rem 0.58rem;
    
  }
  .bottom .bbs{
    // background: url("assets/images/bottombar/bbs.png") no-repeat center;
    // background-image: url("assets/images/bottombar/bbs.png") no-repeat center;
    // background-size: 0.58rem 0.58rem;
    

  }
  .bottom .cart{
    // background: url("./assets/images/bottombar/cart.png") no-repeat center;
    // background-image: url("./assets/images/bottombar/cart.png") no-repeat center;
    // background-size: 0.58rem 0.58rem;
    
  }
  .bottom .my{
    // background: url("./assets/images/bottombar/my.png") no-repeat center;
    // background-image: url("./assets/images/bottombar/my.png") no-repeat center;
    // background-size: 0.58rem 0.58rem;
    
  }

}
</style>
